<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	a:hover{text-decoration: none;}
	.ace-icon.fa-clock-o{margin-right: 3px}
    .holiday-input{
        color: #478FCA;
        background-color: #dff0d8;
        border:none;
        width:90px;
        height:23px;
    }
    .holiday-input:focus{
       outline: none;
    }
    .week-list{text-align: center;margin: 20px 0;}
    .week-list button{margin-right: 5px;}
</style>
<div class="page-header">
	<h1>
		定时开关机
		<!-- <a href="<?= admin_url('brand/grade_power_time') ?>" class="btn btn-info a-custom">
			<i class="ace-icon fa fa-cog"></i> 设置年级定时开关机
		</a> -->
	</h1>

</div>

<div class="col-xs-12">
	<!-- 教师权限不可批量修改 -->
	<?php if($rmxUser['user_type'] != USER_TYPE_TEACHER): ?>
		<div class="mt10 mb10">
			<i class="ace-icon fa fa-clock-o blue"></i> 每周开机日期：&nbsp;&nbsp;&nbsp;&nbsp;
			<a class="week" href="#modal-week" data-toggle="modal" data-id="0">
				<?php if($weekStr): ?>
					<span class="label label-success mr10"><?= $weekStr ?></span>
				<?php else: ?>暂未设置<?php endif; ?>
				<i class="fa fa-edit"></i>
			</a>
		</div>
		<div class="mt10 mb10">
			<i class="ace-icon fa fa-clock-o blue"></i> 放假关机时间段：
			<a class="holiday" href="#modal-holiday" data-toggle="modal" data-id="0">
				<?php if($holidayArr): ?>
					<?php foreach($holidayArr as $holiday): ?>
						<span class="label label-warning mr10"><?= $holiday['startdate'] ?> ~ <?= $holiday['enddate'] ?></span>
					<?php endforeach; ?>
				<?php else: ?>暂未设置<?php endif; ?>
				<i class="fa fa-edit"></i>
			</a>
		</div>
		<div class="mt10 mb10">
			<i class="ace-icon fa fa-clock-o blue"></i> 默认开机时间段：
			<a class="power-time" href="#modal-power-time" data-toggle="modal" data-id="0">
				<?php if($powertime && $powertime !== '[]'): ?>
					<?php $powertimeJson = json_decode($powertime, true); ?>
					<?php foreach($powertimeJson as $time): ?>
						<span class="label label-success mr10"><?=$time['starttime']?> - <?=$time['endtime']?></span>
					<?php endforeach; ?>
				<?php else: ?>
					暂未设置
				<?php endif; ?>
				<i class="fa fa-edit"></i>
			</a>
		</div>
	<?php endif ?>	

	<table id="dynamic-table" class="table table-striped table-bordered table-hover" style="margin-top:10px">
		<thead>
			<tr>
				<th>班牌ID</th>
				<th>所属校区</th>
				<th>所属班级</th>
				<th>在线状态</th>
				<th>每天开机时间</th>
				<th>最后上线时间</th>
				<th>最后下线时间</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>
<!-- 定时开关机弹窗 -->
<div id="modal-power-time" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					<span>设置定时开关机</span>
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10">
							<input type="hidden" name="id" />
							<div class="form-group mb10">
								<a href="javascript:;" class="col-sm-4 control-label bolder blue create-power-time"><i class="fa fa-plus"></i> 添加定时开关机时间</a>
							</div>
							<div id="power-time-div"></div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="save-power-time">
					<i class="ace-icon fa fa-check"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>
<!-- 放假弹窗 -->
<div id="modal-holiday" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					<span>放假时间</span>
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10">
							<div class="form-group mb10">
								<a href="javascript:;" class="col-sm-3 control-label bolder blue create-holiday" style="margin-left:10px;"><i class="fa fa-plus"></i> 添加放假时间</a>
							</div>
							<div id="holiday-div"></div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="save-holiday">
					<i class="ace-icon fa fa-check"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>
<!-- 星期弹窗 -->
<div id="modal-week" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					<span>每周生效时间（点击选择）</span>
				</div>
			</div>
			<div class="modal-body no-padding">
                <div class="col-xs-12 week-list">
                    <button class="btn btn-sm btn-danger" data-value="2">周一</button>
                    <button class="btn btn-sm btn-danger" data-value="3">周二</button>
                    <button class="btn btn-sm btn-danger" data-value="4">周三</button>
                    <button class="btn btn-sm btn-danger" data-value="5">周四</button>
                    <button class="btn btn-sm btn-danger" data-value="6">周五</button>
                    <button class="btn btn-sm btn-danger" data-value="7">周六</button>
                    <button class="btn btn-sm btn-danger" data-value="1">周日</button>		
                </div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="save-power-week">
					<i class="ace-icon fa fa-check"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
	$(function(){
        // 班牌表格
		$('#dynamic-table').dt({
			"ajaxUrl": '<?=admin_url('brand/get_brand_list')?>',
			"columns": [
	            {"data": "id"},
				{"data": "campusName"},
				{"data": "className"},
	            {"data": function(ret){
	            	var onlineState = '<span class="green"><i class="fa fa-circle"></i> 在线</span>';
	            	if(ret.is_online == 0) onlineState = '<span class="light-grey"><i class="fa fa-circle"></i> 离线</span>';
	            	return onlineState;
	            }},
	            {"data": function(ret){
					var powerStr = "";
					if('[]' === ret.power_time) {
						powerStr = '<a class="power-time" href="#modal-power-time" data-toggle="modal" data-id="'+ ret.id +'">暂未设置 <i class="fa fa-edit"></i></a>';
					} else if(ret.power_time == '<?=$powertime?>') {
	            		powerStr = '<a class="power-time text-success" href="#modal-power-time" data-toggle="modal" data-id="'+ ret.id +'">跟随默认时间 <i class="fa fa-edit"></i></a>';
	            	} else {
	            		powerStr = '<a class="power-time text-danger" href="#modal-power-time" data-toggle="modal" data-id="'+ ret.id +'">自定义时间 <i class="fa fa-edit"></i></a>';
	            	}
	            	return powerStr;
				}},
				{"data": "online_time"},
	            {"data": "offline_time"},
			]
		});
        // 新增开关机时间
        $("body").on("click", ".create-power-time", function(){
			create_power_time_item("8:00", "18:00");
		});
		// 设置定时开关机时间
		$("body").on("click", ".power-time", function(){
			brandId = $(this).data("id");
			// 获取设备开关机时间
			var params = {brand: brandId};
			var getUrl = "<?=admin_url('brand/get_power_time')?>";
			ajax_get(getUrl, params, function(res) {
				// 清空时间点
				$("#power-time-div").empty();

				for(var i in res.data) {
					var row = res.data[i];
					create_power_time_item(row.starttime, row.endtime);
				}
			});
		});
		// 保存开关机时间
		$("#save-power-time").click(function(){
			var powerTime = new Array();
			$("#power-time-div .form-group").each(function(){
				// 检查内容是否被删除
				if($(this).find(".time-start").length) {
					var timeData = {
						"starttime" : $(this).find(".time-start").text(),
						"endtime": $(this).find(".time-end").text()
					}
					powerTime.push(timeData);
				}
			})
			// 提交到后台
			var params = {
				"brand": brandId,
				"time": powerTime
			};
			var actionUrl = "<?=admin_url('brand/save_power_time')?>";
			ajax_post(actionUrl, params, function(res){
				window.location.reload();
			})
		});
        // 新增放假时间
        $("body").on("click", ".create-holiday", function(){
            // 今天日期
            var today = "<?= date('Y-m-d') ?>";
            // 明天日期
            var tomorrow = "<?= date('Y-m-d', strtotime('+1 day')) ?>";
			create_holiday_item(today, tomorrow);
		});
		// 设置放假时间
		$("body").on("click", ".holiday", function(){
			// 获取设备开关机时间
			var getUrl = "<?=admin_url('brand/get_power_holiday')?>";
			ajax_get(getUrl, {}, function(res) {
				// 清空时间点
				$("#holiday-div").empty();
				for(var i in res.data) {
					var row = res.data[i];
					create_holiday_item(row.startdate, row.enddate);
				}
            });
		});
		// 保存放假时间
		$("#save-holiday").click(function(){
			var holiday = new Array();
			$("#holiday-div .form-group").each(function(){
                // 检查内容是否被删除
                dateStart = $(this).find("[name=date-start]").val();
                dateEnd = $(this).find("[name=date-end]").val();
				if(dateStart !== undefined && dateStart.length) {
					var dateData = {
						"startdate" : dateStart,
						"enddate": dateEnd
					}
					holiday.push(dateData);
				}
			})
			// 提交到后台
			var params = {
				"holiday": holiday
			};
			var actionUrl = "<?=admin_url('brand/save_power_holiday')?>";
			ajax_post(actionUrl, params, function(res){
				window.location.reload();
			})
        });
 		// 点击每周时间
        $("body").on("click", ".week-list button", function() {
            if($(this).hasClass("btn-success")) {
                $(this).removeClass("btn-success").addClass("btn-danger");
            } else {
                $(this).removeClass("btn-danger").addClass("btn-success");
            }
        });
		// 设置每周时间
		$("body").on("click", ".week", function(){
			// 获取设备开关机时间
			var getUrl = "<?=admin_url('brand/get_power_week')?>";
			ajax_get(getUrl, {}, function(res) {
				for(var i in res.data) {
					var row = res.data[i];
                    $("[data-value=" + row + "]").removeClass("btn-danger").addClass("btn-success");
				}
			});
		});
		// 保存每周时间
		$("#save-power-week").click(function(){
            // 获取选中的星期
            var weekArr = [];
            $(".week-list .btn-success").each(function() {
                weekArr.push($(this).data("value"));
            });
			// 提交到后台
			var params = {
				"weekArr": weekArr
			};
			var actionUrl = "<?=admin_url('brand/save_power_week')?>";
			ajax_post(actionUrl, params, function(res){
				window.location.reload();
			})
		});
    })
	// 生成定时开关机时间
	function create_power_time_item(starttime, endtime) {
		$("#power-time-div").append('<div class="form-group mg0">\
			<div class="col-sm-1"></div>\
			<div class="alert alert-success col-sm-10">\
				<button type="button" class="close" data-dismiss="alert">\
					<i class="ace-icon fa fa-times"></i>\
				</button>\
				<a href="javascript:;" class="timepicker time-start" data-default-time="'+ starttime +'">'+ starttime +'</a> - <a href="javascript:;" class="timepicker  time-end" data-default-time="'+ endtime +'">'+ endtime +'</a>\
			</div>\
		</div>');

		$('.timepicker').timepicker({
				minuteStep: 1,
				showSeconds: false,
				showMeridian: false,
				disableFocus: true,
				icons: {
					up: 'fa fa-chevron-up',
					down: 'fa fa-chevron-down'
				}
			}).on('changeTime.timepicker', function(e) {
				var target = e.currentTarget;
				$(target).text(e.time.value)
			});
	}
	// 生成放假时间
	function create_holiday_item(startDate, endDate) {
		$("#holiday-div").append('<div class="form-group mg0">\
			<div class="col-sm-1"></div>\
			<div class="alert alert-success col-sm-10">\
				<button type="button" class="close" data-dismiss="alert">\
					<i class="ace-icon fa fa-times"></i>\
				</button>\
                <input class="datepicker holiday-input" name="date-start" value="'+ startDate +'" /> ~ &nbsp; <input class="datepicker holiday-input" name="date-end" value="'+ endDate +'" />\
			</div>\
        </div>');
        var today = "<?= date('Y-m-d') ?>";
        $(".datepicker").datepicker({
			autoclose: true,
			todayHighlight: true,
			startDate: "<?= date('Y-m-d') ?>"
        });
    }
</script>